<template>
      <a-card :bordered="true">
        <a-row :gutter="24">
            <a-col :sm="24" :md="16" :xl="16" :style="{ marginBottom: '24px' }">
                <div class="title">
                    <span class="job_title job_title_tit">{{reportDetailObj.postTitle}}</span><span class="job_title" v-if="reportDetailObj.bounty">【悬赏{{reportDetailObj.bounty}}元】</span><span class="post_no">职位编号：{{reportDetailObj.recruitNo}}</span>
                </div>
                <div class="post_details">
                   <img :src='reportDetailObj.wxAccountImg' alt="" class="img">
                   <div class="post_details_con">
                       <div class="post_name">{{reportDetailObj.wxAccountName}}</div>
                       <div class="company_name">{{reportDetailObj.nowCompany}} {{reportDetailObj.nowPost}}</div>
                       <!-- <div class="company_name" style="display:none">原IBM</div> -->
                       <div class="tag_post">
                           <template v-for="label in labelArr">
                                 <a-tag color="#108ee9" :key="label">{{label}}</a-tag>
                           </template>
                       </div>
                   </div>
                   <div class="qrCode">
                       <img :src='perQrcodeUrl' alt="" class="">
                       <span>扫描查看个人主页</span>
                   </div>

                </div>
                <div class="report_info">
                    <div class="title">报名信息</div>
                    <div class="content">
                          <div class="content_list">姓名：{{reportDetailObj.name}}</div>
                          <div class="content_list">联系电话：<span>{{reportDetailObj.phone}}</span></div>
                          <!-- <div class="content_list">求职状态：已经离职——可随时到岗</div> -->
                          <div class="content_list report_introduce">个人介绍：{{reportDetailObj.describe}}</div>
                    </div>
                </div>
                <div class="invate" style="display:none">
                     <div class="invate_title">邀请关系</div>
                     <div class="invate_user">
                         <div class="invate_user-li">
                            <img src="https://files.shouhuobao.com/rocket/station/lb.png" alt="" class="user_icon">
                             <span>哈哈哈哈</span>
                             <img src="../../../assets/icons/right_arow.png" alt="" class="arrow_invate">
                             <!-- <a-icon type="arrow-right" style="font-size:20px;color:red;width:60px;height:20px" theme="filled"/> -->
                         </div>
                     </div>
                </div>
                
            </a-col>
            <a-col :sm="24" :md="8" :xl="8" :style="{ marginBottom: '24px' }">
                 <div class="job_progress">
                     <h3 class="title">当前进度<span v-if="currentStatus==-1" class="hasWseedout">(已淘汰)</span></h3>
                    <a-steps direction="vertical" size="small" :current="currentStatus" class="progress_con">
                        <a-step title="已报名" description="" />
                        <a-step title="已推荐" description="" />
                        <a-step title="已面试" description="" />
                        <a-step title="已录用" description="" />
                        <a-step title="已到岗" description="" />
                        <a-step title="已过保" description="" />

                    </a-steps>
                    <p class="job_tip">注释：要及时更新状态哦，操作已淘汰不会给候选人发布送任何通知，仅用于状态标记。</p>
                 </div>
            </a-col>
        </a-row>
      </a-card>
</template>
<script>
import { reportDetail } from '@/api/job'
import { datetimes6 } from '@/utils/util';
export default {
    data (){
     return {
        reportDetailObj:null,
        currentStatus:'',
        labelArr:[],
     
      }
    },
    created(){
      const that=this;
      const id = this.$route.params.id;

     reportDetail({device:5, version:3900,id:id})
        .then(res => {
        console.info(res);
        if(res.code==1){
            var result=res.result;
            this.reportDetailObj=result;

            if(result.authType==0){
                if(result.infoStr){
                   var infoStr=JSON.parse(result.infoStr);
                   if(infoStr.userLable){
                      var userLable=infoStr.userLable.split(',');
                      this.labelArr=userLable;
                   }
                }
            }
            /**
             *  status 1.已推2.已面试3.已录用4.已入职5.已过保6.淘汰7报名 
             */
        
            if(result.status==7){
               that.currentStatus=1;
            }else if(result.status==1){
              that.currentStatus=2;
            }else if(result.status==2){
              that.currentStatus=3;
            }else if(result.status==3){
              that.currentStatus=4;
            }else if(result.status==4){
              that.currentStatus=5;
            }else if(result.status==5){
              that.currentStatus=6;
            }else if(result.status==6){//淘汰
             that.currentStatus=-1;
            }


          that.perQrcodeUrl='https://xsxz-dev.shouhuobao.com/communityAuth/getSmallUserQrCode?userId=' + result.userId


        }
        })
       .catch((err) => {
        console.info(err)
        })
            
      
    },
    methods:{},

}
</script>
<style lang="less" scoped>
    .title{
      .job_title{
          font-size: 20px;
          color: #2f54eb;
          font-weight: 500;
      }
      .job_title_tit{
          width: 400px;
          overflow: hidden;
          text-overflow:ellipsis;
          white-space: nowrap;
      }
      .post_no{
         color: #2f54eb;
         font-size:14px;
         margin-left: 10px;
      }
    }
    .post_details{
        clear: both;
        overflow: hidden;
        margin-top: 25px;
        .img{
         display: block;
          width:60px;
          height: 60px;
          border-radius: 5px;
          -webkit-border-radius:5px;
          float:left;
        }
        .post_details_con{
            float: left;
            margin-left: 18px;
            .post_name{
                font-weight: 500;
                font-size: 25px;
                color: rgba(0, 0, 0, 1)
            }
            .company_name{
                font-size: 15px;
                color: rgba(0, 0, 0, 0.65);
                line-height: 25px;
            }
            .tag_post{
              margin-top:5px;
            }
         
        }
        .qrCode{
            float: right;
            img{
                display: block; 
                width: 60px;
                height: 60px;
                margin: 0 auto;
            }
            span{
                font-size: 14px;
                color: rgba(0, 0, 0, 0.65);
                margin-top: 10px;
                display: block;
                text-align: center;

            }
        }
    }
    .report_info{
        border:1px solid #ccc;
        padding:10px;
        margin-top:30px;
       .title{
          font-size: 14px;
          font-weight: 500;
          color: rgba(0, 0, 0, 1)
       }
       .content{
           margin-top:20px;
         .content_list{
           font-size: 14px;
           color: rgba(0, 0, 0, 0.65);
           margin-top: 10px;
         }
         .report_introduce{
             line-height: 20px;
             padding-right: 30px;
             
         }

       }
    }
    .invate{
        margin-top: 30px;
        padding:20px 4px;
        border-top:1px solid #ccc;
        border-bottom: 1px solid #ccc;
        .invate_title{
            font-size: 20px;
            color: rgba(0, 0, 0, 1);
            font-weight: 500;
        }
        .invate_user{
            margin-top:15px;
          .invate_user-li{
             .user_icon{
                width: 30px;
                height: 30px;
                border-radius: 5px;
                -webkit-border-radius:5px;
                vertical-align: middle;
             }
            .arrow_invate{
                 width: 65px;
                 height: 35px;
                 vertical-align: middle;
            }
            span{
                font-size: 14px;
            }
        }

        }
     
    }
    .job_progress{
        margin-top:50px;
        border-left:1px solid #ccc;
        padding-left:20px;
        padding-bottom: 100px;
        .title{
          font-size: 14px;
          font-weight: 500;
          color: rgba(0, 0, 0, 1);
            .hasWseedout{
              font-weight:400;
              font-size: 12px;
          }
        }
        .progress_con{
            margin-top:20px;
        }
        .job_tip{
            font-size: 14px;
            color: rgba(0, 0, 0, 0.65);
        }
    }

</style>


